<template>
	<view>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view>
					<cmd-upload title="头像" type="user" :businessId="user.userId + ''" />
					<cmd-cel-item title="昵称" slot-right>
						<input maxlength="32" style="text-align:right;width: 400upx;" placeholder="请填写" v-model="user.userNikename" />
					</cmd-cel-item>
					<cmd-cel-item title="性别" slot-right>
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="user.userSex" :range="sex">
										<view class="uni-input">
											{{ sex[user.userSex] }}
											<cmd-icon type="chevron-right" size="24" color="#C5CAD5" />
										</view>
									</picker>
								</view>
							</view>
						</view>
					</cmd-cel-item>
					<cmd-cel-item title="联系方式" slot-right>
						<input maxlength="20" style="text-align:right;width: 400upx;" placeholder="请填写" v-model="user.userMobile" disabled />
					</cmd-cel-item>
					<cmd-cel-item title="邮箱" slot-right>
						<input maxlength="32" style="text-align:right;width: 400upx;" placeholder="请填写" v-model="user.userEmail" />
					</cmd-cel-item>
					<button class="btn-logout" @click="save" v-no-more-click :disabled="$store.state.disabled">保存编辑</button>
				</view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
import cmdNavBar from '@/components/cmd-nav-bar/cmd-nav-bar.vue';
import cmdPageBody from '@/components/cmd-page-body/cmd-page-body.vue';
import cmdTransition from '@/components/cmd-transition/cmd-transition.vue';
import cmdCelItem from '@/components/cmd-cell-item/cmd-cell-item.vue';
import cmdIcon from '@/components/cmd-icon/cmd-icon.vue';
import cmdAvatar from '@/components/cmd-avatar/cmd-avatar.vue';
import cmdUpload from '@/components/cmd-upload/cmd-upload.vue';
export default {
	components: {
		cmdNavBar,
		cmdPageBody,
		cmdTransition,
		cmdCelItem,
		cmdAvatar,
		cmdIcon,
		cmdUpload
	},

	data() {
		return {
			user: {},
			sex: ['男', '女'],
			imgList: [],
			rule: [
				{
					name: 'userId',
					checkType: 'notnull',
					errorMsg: '用户已过期请重新登录'
				},
				{
					name: 'userNikename',
					checkType: 'notnull',
					errorMsg: '请填写用户昵称'
				},
				{
					name: 'userSex',
					checkType: 'in',
					checkRule: '0,1',
					errorMsg: '请选择用户性别'
				},
				{
					name: 'userMobile',
					checkType: 'phoneno',
					errorMsg: '联系方式请填写正确的手机号'
				},
				{
					name: 'userEmail',
					checkType: 'email',
					errorMsg: '请填写正确的邮箱'
				}
			]
		};
	},
	onShow() {
		this.user = this.$store.state.userInfo;
	},

	methods: {
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.user.userSex = e.target.value;
			this.$forceUpdate();
		},
		async save() {
			if (!this.dataCheck.check(this.user, this.rule)) {
				uni.showToast({
					title: this.dataCheck.error,
					icon: 'none'
				});
				return;
			}
			let res = await this.$request.post('/user-admin/user/update', {
				data: this.user
			});
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.btn-logout {
	margin-top: 100upx;
	width: 80%;
	border-radius: 50upx;
	font-size: 16px;
	color: #fff;
	background: linear-gradient(to right, #365fff, #36bbff);
}

.btn-logout-hover {
	background: linear-gradient(to right, #365fdd, #36bbfa);
}
</style>
